<template>
  <div id="app">
    <router-view />
    <Loading :active.sync="isLoading" :height="40" :is-full-page="true" :width="40" color="#666" :opacity="1" transition="">
      <div slot="after">加载中...</div>
    </Loading>
    <PcQrcode></PcQrcode>
    <div class="back-to-top-pc" v-if="showBackToTop" @click="backToTop"></div>
  </div>
</template>
<script>
import Vue from 'vue'
import Loading from 'vue-loading-overlay'
import PcQrcode from './components/PcQrcode'
import setTitle from './common/setTitle'
import * as events from './store/events'
import 'vue-loading-overlay/dist/vue-loading.css'
import { getUrlString } from './common/utils'

export default {
  components: {
    Loading,
    PcQrcode // pc端打开后的浮动二维码
  },
  data() {
    return {
      length: 0,
      isLoading: false,
      showBackToTop: false
    }
  },
  created() {
    setTitle('品牌中网')
    // 定义全局显示、隐藏loading的方法
    Vue.prototype.$showLoading = () => {
      this.isLoading = true
    }
    Vue.prototype.$hideLoading = () => {
      this.isLoading = false
    }
  },
  mounted() {
    // 统计分享回访
    if (getUrlString('ctype')) {
      let script = document.createElement('script')
      script.type = 'text/javascript'
      script.src = 'http://tuiguang.brandzw.com:8090/accesslog.js'
      document.getElementsByTagName('head')[0].appendChild(script)
    }
    // 获取客服数据
    if (window.sessionStorage.getItem('serviceInfo')) {
      let serviceInfo = JSON.parse(window.sessionStorage.getItem('serviceInfo'))
      // 客服数据存到store中
      this.$store.commit(events.SET_SERVICE_INFO, serviceInfo)
    }
    // 获取catname 存到store中
    if (window.localStorage.getItem('catName')) {
      let catName = JSON.parse(window.localStorage.getItem('catName'))
      this.$store.commit(events.SET_CAT_NAME, catName)
    }
    if (!this.$getDeviceInfo().isPhone && document.documentElement.getBoundingClientRect().width > 560) {
      this.showBackToTop = true
    }
  },
  methods: {
    backToTop() {
      window.scroll(0, 0)
    }
  }
};
</script>

<style>
#app {
  background-color: #fff;
}
.vld-icon {
  text-align: center;
  color: #666;
}
.back-to-top-pc {
  position: fixed;
  width: 65px;
  height: 65px;
  bottom: 86px;
  right: 0;
  margin: auto;
  left: 50%;
  /* transform: translate3d(340px, 0, 0); */
  background: url(./assets/img/back-to-top.png) center no-repeat;
  background-size: contain;
  cursor: pointer;
}
</style>
